<template>
	<view class="content" v-show="isShowFilter" @touchmove.stop>
		<view>
			<view v-show="showCountry">
				<view class="meetFilter-item-h2 margin_box">
					<text class="lf" id="country">国家</text>
					<view class="rf" @tap="moreCountry">
						更多
						<image v-if="isAddFriendPage" src="/static/filter/more.png"></image>
						<image v-else src="/static/filter/more.png"></image>
					</view>
					<view class="clear"></view>
				</view>
				<view class="meetFilter-countries">
					<view @tap="selectCountry(index)" :class="selectedCountry==index ? 'active lf' : 'lf'" v-text="item" v-for="(item,index) in countries"
					 :key="index"></view>
				</view>
			</view>


			<view v-show="showSex">
				<view class="meetFilter-item-h2">
					<text class="lf">性别</text>
					<view class="clear"></view>
				</view>
				<view class="meetFilter-sex">
					<view @tap="selectSex('man')" :class="{active:manSelected===true}" class="item man">
						<image v-if="isAddFriendPage" class="manImg" :src="manImg1"></image>
						<image v-else class="manImg" :src="manImg"></image> 男
					</view>
					<view @tap="selectSex('woman')" :class="{active:womanSelected===true}" class="item woman">
						<image v-if="isAddFriendPage" class="womanImg" :src="womanImg1"></image>
						<image v-else class="womanImg" :src="womanImg"></image> 女
					</view>
					<view @tap="selectSex('')" :class="{active:(manSelected===false && womanSelected===false)}" class="item">
						不限
					</view>
				</view>
			</view>
			<view v-show="showAge">
				<view class="meetFilter-item-h2">
					<text class="lf">年龄</text>
					<text class="rf">{{minVal}}-{{maxVal}}</text>
					<view class="clear"></view>
				</view>
				<view class="meetFilter-age">
					<view class="meetFilter-age-main">
						<filterage :backgroundColor="backgroundColor" :fontColor="fontColor" @getMinVal="getMinVal" @getMaxVal="getMaxVal"
						 :minVal="minVal" :maxVal="maxVal" :showMinVal="showMinVal" :showMaxVal="showMaxVal"></filterage>
					</view>
				</view>
			</view>
			<view v-show="showPreference">
				<view class="meetFilter-item-h2">
					<text class="lf">偏好</text>
					<view class="clear"></view>
				</view>
				<view class="preference-main">
					<view class="meetFilter-countries">
						<view v-show="item.show" @tap="selectPreference(index)" :class="selctedPreference==index ? 'active lf' : 'lf'"
						 v-text="item.name" v-for="(item,index) in preference" :key="index"></view>
					</view>
					<image class="openImg" v-show="!isAddFriendPage" v-if="isOpenPreference" @tap="openPreference" src="/static/filter/up.png"></image>
					<image class="openImg" v-show="!isAddFriendPage" v-else @tap="openPreference" src="/static/filter/down.png"></image>
					<image class="openImg" v-show="isAddFriendPage" v-if="isOpenPreference" @tap="openPreference" src="/static/filter/up.png"></image>
					<image class="openImg" v-show="isAddFriendPage" v-else @tap="openPreference" src="/static/filter/down.png"></image>
				</view>
			</view>

			<view v-show="showReal">
				<view class="meetFilter-item-h2">
					<text class="lf">认证</text>
					<view class="clear"></view>
				</view>
				<view class="meetFilter-countries">
					<view @tap="selectReal(index)" :class="selectedReal==index ? 'active lf' : 'lf'" v-text="item" v-for="(item,index) in real"
					 :key="index"></view>
				</view>
			</view>
		</view>
		<view class="meetFilter-confirm">
			<button type="primary" class="replay" @tap="reset">重置</button>
			<button @tap="confirm">确定</button>
		</view>
	</view>
</template>

<script>
	import filterage from './filterage'
	export default {
		components: {
			filterage
		},
		props: ["isShowFilter", "isAddFriendPage"],
		data() {
			return {
				title: "",
				filterType: '', //是首页筛选/地图筛选/地图匹配
				isAddFriendPage: false, //是否是添加好友页面
				countries: [], //历史存本地

				showCountry: true,
				showRelation: false,
				// showSort: false,
				showSex: true,
				showAge: true,
				showPreference: true,
				showReal: true,

				backgroundColor: '#94DEDD',
				fontColor: false,

				Relation: ['全部', '通讯录', '同学', '老乡', '同事'],
				sort: ['默认', '推荐', '最热', '最新'],
				selectedCountry: -1,
				womanSelected: false,
				womanImg: '/static/filter/woman_unselect.png',
				womanImg1: '/static/filter/woman_unselect.png',
				manSelected: false,
				manImg: '/static/filter/man_unselect.png',
				manImg1: '/static/filter/man_unselect.png',
				minAge: '18',
				maxAge: '50',

				age_start: '1969-01-01',
				age_end: '2001-01-01',
				minVal: 18,
				maxVal: 50,
				showMinVal: 18,
				showMaxVal: 50,

				matchingType: '',
				order_by: '',
				commend: 0,

				preference: [{
					name: '不限',
					show: true,
				}, {
					name: '交友拍拖',
					show: true
				}, {
					name: '语言学习',
					show: true,
				}, {
					name: '境外旅游',
					show: false,
				}, {
					name: '跑腿代购',
					show: false,
				}, {
					name: '全球内容',
					show: false,
				}, {
					name: '商业互助',
					show: false,
				}],
				selctedPreference: 0,
				profession: [], //历史存本地
				// selectedProfession: -1,
				// vip: ['畅聊会员', '普通会员', '不限'],
				// selectedVip: 2,
				real: ['不限', '已认证', '未认证'],
				selectedReal: 0,

				isOpenPreference: false,
			}
		},
		mounted() {
			var profession = uni.getStorageSync('profession');
			if (profession != '') {
				this.profession = JSON.parse(profession);
			}
			var countryNotClear = uni.getStorageSync('userCountry');
			console.log(countryNotClear)
			if (countryNotClear != '') {
				this.countries.push(countryNotClear) ;
			}
		},
		onShow() {
			var profession = uni.getStorageSync('profession');
			if (profession != '') {
				this.profession = JSON.parse(profession);

				if (this.selectedProfession == -1) {
					this.selectedProfession = 0;
				}
			}
			var countryNotClear = uni.getStorageSync('userCountry');
			if (countryNotClear != '') {
				this.countries.splice(0,1,countryNotClear) ;
				console.log(this.countries)
				if (this.selectedCountry == -1) {
					this.selectedCountry = 0;
				}
			}
		},
		methods: {
			getMinVal(v) {
				this.minVal = v.detail.value;
				this.slideBeyond();
			},
			getMaxVal(v) {
				this.maxVal = v.detail.value;
				this.slideBeyond();
			},
			slideBeyond() {

				if (this.minVal > this.maxVal) {
					this.showMinVal = this.maxVal;
					this.showMaxVal = this.minVal;

					var date = new Date;
					var year = date.getFullYear();
					var maxAge = year - parseInt(this.showMinVal);
					var minAge = year - parseInt(this.showMaxVal);
					this.age_start = minAge + "-01-01";
					this.age_end = maxAge + "-01-01";
				} else {
					this.showMinVal = this.minVal;
					this.showMaxVal = this.maxVal;

					var date = new Date;
					var year = date.getFullYear();
					var maxAge = year - parseInt(this.showMinVal);
					var minAge = year - parseInt(this.showMaxVal);
					this.age_start = minAge + "-01-01";
					this.age_end = maxAge + "-01-01";
				}
			},
			//选择偏好
			selectPreference(index) {
				this.selctedPreference = index;
			},

			//选择认证
			selectReal(index) {
				this.selectedReal = index;
			},
			//选择国家
			selectCountry: function(index) {
				this.selectedCountry = index
			},

			//选择性别
			selectSex: function(type) {
				if (this.isAddFriendPage) {
					if (type === 'woman') {
						this.womanSelected = true;
						this.manSelected = false;
						this.womanImg1 = "/static/filter/woman_selected.png";
						this.manImg1 = "/static/filter/man_unselect.png";
					}
					if (type === 'man') {
						this.womanSelected = false;
						this.manSelected = true;
						this.womanImg1 = "/static/filter/woman_unselect.png";
						this.manImg1 = "/static/filter/man_selected.png";
					}
					if (type === '') {
						this.womanSelected = false;
						this.manSelected = false;
						this.womanImg1 = "/static/filter/woman_unselect.png";
						this.manImg1 = "/static/filter/man_unselect.png";
					}
				} else {
					if (type === 'woman') {
						this.womanSelected = true;
						this.manSelected = false;
						this.womanImg = "/static/filter/woman_selected.png";
						this.manImg = "/static/filter/man_unselect.png";
					}
					if (type === 'man') {
						this.womanSelected = false;
						this.manSelected = true;
						this.womanImg = "/static/filter/woman_unselect.png";
						this.manImg = "/static/filter/man_selected.png";
					}
					if (type === '') {
						this.womanSelected = false;
						this.manSelected = false;
						this.womanImg = "/static/filter/woman_unselect.png";
						this.manImg = "/static/filter/man_unselect.png";
					}
				}
			},
			moreCountry() {
				if (this.isAddFriendPage) {
					uni.navigateTo({
						url: '/pages/Other/countrySelect/countrySelect'
					})
				} else {
					uni.navigateTo({
						url: '/pages/Other/countrySelect/countrySelect'
					})
				}
			},
			morePosition() {
				if (this.isAddFriendPage) {
					uni.navigateTo({
						url: '/Meet/selectProfession/selectProfession'
					})
				} else {
					uni.navigateTo({
						url: 'selectProfession/selectProfession'
					})
				}
			},
			openPreference() {
				if (this.isOpenPreference) {
					this.isOpenPreference = false;
					for (var i = 0; i < this.preference.length; i++) {
						if (i >= 3) {
							this.preference[i].show = false;
						}
					}
				} else {
					this.isOpenPreference = true;
					for (var i = 0; i < this.preference.length; i++) {
						this.preference[i].show = true;
					}
				}
			},
			//确定
			confirm() {
				//国家
				var country;
				if (this.selectedCountry == -1 || this.countries[this.selectedCountry] == '全球') {
					country = '中国';
				} else {
					country = this.countries[this.selectedCountry];
				}
				//性别
				var sex;
				if (this.womanSelected) {
					sex = 2;
				} else if (this.manSelected) {
					sex = 1
				} else {
					sex = 0
				}
				//偏好
				var preference;
				if (this.preference[this.selctedPreference].name == '不限') {
					preference = null;
				} else {
					preference = this.preference[this.selctedPreference].name;
				}

				//认证
				var identity_auth;
				if (this.selectedReal == 0) {
					identity_auth = null;
				} else if (this.selectedReal == 1) {
					identity_auth = true;
				} else if (this.selectedReal == 2) {
					identity_auth = false;
				}
				var mapParam = {
					country: country,
					sex: sex,
					age_start: this.age_start, //开始年龄
					age_end: this.age_end, //结束年龄
					preference: preference, //偏好
					identity_auth: identity_auth, //认证
				}
				// console.log(mapParam);
				this.$emit('confirm', mapParam)
			},
			reset() {

				this.selectedReal = 0;
				this.showMinVal = 18;
				this.showMaxVal = 50;
				this.minVal = 18;
				this.maxVal = 50;
				this.selctedPreference = 0;

				this.sex = null;
				this.age_start = null;
				this.age_end = null;
				this.commend = null;
				this.fontColor = false;
				this.$nextTick(function() {
					this.fontColor = true;
				});
			},
		}
	}
</script>

<style scoped>
	.lf {
		float: left;
	}

	.rf {
		float: right;
	}

	.clear {
		clear: both;
	}

	.meetFilter-item-h2 {
		margin-top: 30upx;
		line-height: 80upx;
		padding-left: 50upx;
		padding-right: 40upx;
		background: #fff;
		color: #000;
		border-radius: 0;
	}

	.margin_box {
		margin-top: 120upx;
	}

	.meetFilter-item-h2 text {
		font-size: 30upx;
	}

	.meetFilter-item-h2 .rf {
		color: #91909E;
		font-size: 24upx;
	}

	.meetFilter-item-h2 .rf image {
		height: 22upx;
		width: 14upx;
		top: 3upx;
		position: relative;
		margin-left: 10upx;
	}

	.meetFilter-countries {
		padding-top: 30upx;
		padding-bottom: 30upx;
		color: #fff;
		font-size: 30upx;
		overflow: hidden;
		padding: 20upx 60upx;
	}

	.meetFilter-countries>view {
		width: 150upx;
		line-height: 80upx;
		border: 1upx solid #fff;
		text-align: center;
		border-radius: 6upx;
		margin-right: 25upx;
		margin-bottom: 30upx;
		border-color: #33CBCC;
		color: #33CBCC;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.meetFilter-countries>view:nth-child(3n) {
		margin-right: 0;
	}

	.meetFilter-countries>view.active {
		border: 1upx solid transparent;
		color: #fff;
		background: #33CBCC;
	}

	.meetFilter-sex {
		padding: 50upx;
		display: flex;
		font-size: 30upx;
		padding-top: 30upx;
		padding-bottom: 30upx;
	}

	.meetFilter-sex .item {
		width: 150upx;
		height: 66upx;
		border: 1upx solid #fff;
		border-radius: 33upx;
		display: flex;
		justify-content: center;
		border-color: #33CBCC;
		color: #33CBCC;
		align-items: center;
		margin-right: 40upx;
	}

	.meetFilter-sex .item.active {
		color: #fff;
		background: #33CBCC;
		border: 1upx solid transparent;
		border-color: #33CBCC;
	}

	.meetFilter-sex image {
		margin-right: 20upx;
	}

	.meetFilter-sex .manImg {
		width: 30upx;
		height: 38upx;
	}

	.meetFilter-sex .womanImg {
		width: 27upx;
		height: 38upx;
	}

	.meetFilter-confirm {
		text-align: center;
		background: #FFFFFF;
		width: 100%;
		height: 120upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.meetFilter-confirm button {
		width: 280upx;
		height: 80upx;
		font-size: 30upx;
		border-color: #33CBCC;
		color: #FFFFFF;
		background: #46CECF;
	}

	.meetFilter-confirm .replay {
		color: #333333;
		background: #E6E6E6;
	}

	.content {
		position: fixed;
		right: 0;
		top: 0;
		width: 85%;
		z-index: 1999;
		height: 100%;
		overflow-y: scroll;
		background: rgb(243, 243, 243);
	}

	.preference-main {
		position: relative;
	}

	.openImg {
		position: absolute;
		top: 30upx;
		right: 20upx;
		width: 39upx;
		height: 39upx;
	}

	.meetFilter-countries>view.long-item {
		width: 100%;
	}
</style>
